<!--  -->
<template>
  <div class="copy-system">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="490px" @closed="hidden" :close-on-click-modal="false">
      <el-form :model="site" v-loading="loading" :rules="rules" ref="siteSystemCopyForm"
        label-width="80px">
        <el-form-item label="系统类型" prop="systemId" :rules="rules.systemId">
          <el-select size="medium" v-model="site.systemId" style="width: 370px;" placeholder="请选择系统">
            <el-option v-for="item in systems" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="复制到：" prop="toSiteId" :rules="rules.toSiteId">
          <el-select size="medium" v-model="site.toSiteId" style="width: 370px;" placeholder="请选择语言版本" @change="changeThis">
            <el-option v-for="item in currentSite.list" :key="item.id" :label="showLanguageByLanguageId(item.languageId)" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hidden" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">开始复制</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    resetData: {
      type: Function
    }
  },
  data () {
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      systems: [],
      site: {},
      rules: {
        toSiteId: [
          { required: true, message: '请选择语言版本', trigger: 'blur' }
        ],
        systemId: [
          { required: true, message: '请选择系统', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentSite',
      'alllanguage'
    ]),
    languageFilter () {
      let languages = this.currentSite.list.filter(item => {
        return parseInt(item.languageId) !== parseInt(this.currentSite.site.languageId)
      })
      return languages
    }
  },
  methods: {
    show (title) {
      this.title = title
      this.dialogVisible = true
      // 加载获取系统类型
      this.loading = true
      if (this.currentSite.site && this.currentSite.site.id) {
        this.site.toSiteId = this.currentSite.site.id
      }
      this.$post('/system/infos').then((response) => {
        this.loading = false
        if (response && response.length > 0) {
          this.systems = response
        } else {
          this.systems = []
        }
      })
    },
    changeThis () {
      this.$forceUpdate()
    },
    showLanguageByLanguageId (id) {
      let item = this.alllanguage.find(ele => {
        return parseInt(ele.id) === parseInt(id)
      })
      if (!item) {
        return '未知：' + id
      }
      return item.name
    },
    showLanguageBytoSiteId (id) {
      let toSite = this.currentSite.list.filter(item => {
        return parseInt(item.id) === parseInt(id)
      })
      let item = this.alllanguage.find(ele => {
        return parseInt(ele.id) === parseInt(toSite[0].languageId)
      })
      if (!item) {
        return '未知：' + id
      }
      return item.name
    },
    showSystemBysystemId (id) {
      let item = this.systems.find(item => {
        return parseInt(item.id) === parseInt(id)
      })
      if (!item) {
        return '未知：' + id
      }
      return item.name
    },
    hidden () {
      if (this.$refs['siteSystemCopyForm']) {
        this.$refs['siteSystemCopyForm'].clearValidate()
      }
      this.dialogVisible = false
      this.systems = []
      this.site = {}
      this.loading = false
    },
    save () {
      if (this.loading) {
        return
      }
      this.$refs['siteSystemCopyForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$confirm(`<div style="font-size:16px; color:#333; margin-bottom:10px;">您正在将 ”<xmp style="display:inline-block;font-family: inherit;">${this.showSystemBysystemId(this.site.systemId)}</xmp>“ 系统数据复制至 ”${this.showLanguageBytoSiteId(this.site.toSiteId)}版“，是否确认？</div>`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true,
            customClass: 'copySiteConfirm',
            center: true
          }).then(() => {
            this.$post('/system/copy', {systemId: this.site.systemId, toSiteId: this.site.toSiteId}).then(response => {
              if (response) {
                this.resetData()
              } else {
              }
              this.loading = false
              this.dialogVisible = false
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>
<style scoped>
.save-system /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-system /deep/ .el-form-item {
  margin-bottom: 15px;
}
.save-system /deep/ .el-input.is-disabled .el-input__icon{
  display: none;
}
</style>
